<template>
    <div>
        <h3 style="padding: 3px;">信息总揽</h3>
        <Row>
            <Col span="14">
            <div class="info">
                <Form :label-width="120">
                    <FormItem label="直播标题：">
                        <span style="font-size: 14px">{{roomInfo.eventTitle}}</span>
                    </FormItem>
                    <FormItem label="直播状态：">
                        <Tag v-if="roomInfo.liveStatus == 0" color="yellow">未开播</Tag>
                        <Tag v-if="roomInfo.liveStatus == 1" color="blue">直播中</Tag>
                        <Tag v-if="roomInfo.liveStatus == 2">结束</Tag>
                    </FormItem>
                    <FormItem label="主播名称：">
                        <Tooltip placement="right">
                            <span style="font-size: 14px">{{userInfo.hostName}}</span>
                            <div slot="content">
                                <p>电话:{{userInfo.hostPhone}}</p>
                                <p>备注:{{userInfo.remark}}</p>
                                <p>qq:{{userInfo.hostQq}}</p>
                            </div>
                        </Tooltip>
                    </FormItem>
                    <FormItem label="所属部门：">
                        <Tag type="border" color="blue">{{userInfo.department}}</Tag>
                        <!--<span style="font-size: 14px"></span>-->
                    </FormItem>
                    <FormItem label="开播时间：">
                        <time style="font-size: 14px">{{roomInfo.eventStartTime | formatDate}}</time>
                    </FormItem>
                    <FormItem label="引导页面：">
                        <Input type="text" v-model="guideUrl" :disabled="true">
                        <Button type="ghost" size="small" slot="append" @click="copy(guideUrl)">复制</Button>
                        </Input>
                        <Button v-if="guideUrl" type="info" class="view" size="small" @click="goPage(guideUrl)">
                            前往
                            <Icon type="chevron-right"></Icon>
                        </Button>
                    </FormItem>
                    <FormItem label="直播页面：">
                        <Input type="text" v-model="livePage" :disabled="true">
                        <Button type="ghost" size="small" slot="append" @click="copy(livePage)">复制</Button>
                        </Input>
                        <Button type="info" class="view" size="small" @click="goPage(livePage)">前往

                            <Icon type="chevron-right"></Icon>
                        </Button>
                        <Button type="info" class="view" size="small" style="margin-right: 5px"
                                @click="showQrImg(livePage)">手机扫码
                        </Button>
                    </FormItem>
                    <FormItem label="推流地址：">
                        <Input type="text" v-model="roomInfo.pushUrl" :disabled="true">
                        <Button type="ghost" size="small" slot="append" @click="copy(roomInfo.pushUrl)">复制</Button>
                        </Input>
                        <Button type="info" class="copy" size="small" @click="showQrImg(roomInfo.pushUrl)">扫码推流</Button>

                    </FormItem>


                </Form>
            </div>
            </Col>
            <Col span="10">
            <div class="info" style="text-align: center">
                <img style="height: 200px;width:355px" :src="roomInfo.livePoster">
                <div class="qr-code">
                    <h3 style="margin-top: 20px">手机微信扫一扫立即观看</h3>
                    <img  style="height: 180px;width:180px" :src="QrCodeUrl">
                </div>
            </div>
            </Col>
        </Row>
        <h3>数据统计</h3>
        <hr style="margin-top: 10px">
        <Row style="margin-top: 20px">
            <Col span="8" style="text-align: center">
                <Circle
                        :size="160"
                        :trail-width="4"
                        :stroke-width="5"
                        :percent="100"
                        stroke-linecap="square"
                        stroke-color="#f90">
                    <div>
                        <Tooltip >
                            <h1>{{roomInfo.replayVisitedNum +roomInfo.onlineVisitedNum}}</h1>
                            <p>累计观看人数</p>
                            <div slot="content">
                                <p>直播:{{roomInfo.onlineVisitedNum}}人</p>
                                <p>回看:{{roomInfo.replayVisitedNum}}人</p>
                            </div>
                        </Tooltip>

                    </div>
                </Circle>
            </Col>
            <Col span="8" style="text-align: center">
                <Circle
                        :size="160"
                        :trail-width="4"
                        :stroke-width="5"
                        :percent="100"
                        stroke-linecap="square"
                        stroke-color="#ff4949">
                    <div>
                        <h1>{{roomInfo.maxOnlineNumber}}</h1>
                        <p>最高并发数</p>
                    </div>
                </Circle>
            </Col>
            <Col span="8" style="text-align: center">
                <Circle
                        :size="160"
                        :trail-width="4"
                        :stroke-width="5"
                        stroke-linecap="square"
                        :percent="100"
                        stroke-color="#13ce66">
                    <div>
                        <h1>{{commentsCount}}</h1>
                        <p>留言总数</p>
                    </div>
                </Circle>
            </Col>

        </Row>

        <!--二维码展示对话框-->
        <Modal
                v-model="showQrCode"
                title="手机扫一扫"
                style="text-align: center"
        >
            <img :src="QrCodeUrl" style="width: 200px;height: 200px">
        </Modal>
    </div>

</template>
<script>
    import {getOneLiveInfoById, getGuideUrlByLiveRoomId, getQrCode, getHostByLiveRoomId ,getCountOfComments} from '../../api/api'
    import {formatDate} from '../../utils/dateUtil'
    export default {
        filters: {
            liveStateFilter: function (code) {
                if (code == 0) {
                    return "未开播"
                }
                if (code == 1) {
                    return "直播中"
                }
                if (code == 2) {
                    return "结束"
                }
            }
        },
        data(){
            return {
                showQrCode: false,
                QrCodeUrl: '',
                guideUrl: '',
                livePage: 'http://www.jackhoo.cn/live/' + this.$store.state.operatedLiveRoomId,
                roomInfo: {
                    eventTitle: '',
                    livePoster: '',
                    eventStartTime: '',
                    pushUrl: '',
                    liveRoomId: '',
                    liveHls: '',
                    liveStatus: 0,
                    onlineVisitedNum:0,
                    replayVisitedNum:0,
                    maxOnlineNumber:0,
                    commentsCount:''
                },
                commentsCount:'0',
                userInfo: {}
            }
        },
        filters: {
            formatDate(time) {
                var date = new Date(time)
                return formatDate(date, 'yyyy-MM-dd hh:mm')
            }
        },
        methods: {
            goPage(url){
                window.open(url)
            },
            showQrImg(url){

                this.showQrCode = true
                this.QrCodeUrl = 'http://www.jackhoo.cn/api/qr_code?url=' + encodeURIComponent(url)
            },
            copy(copyContent){
                var textArea = document.createElement("textarea");
                textArea.style.background = 'transparent';
                textArea.value = copyContent;
                document.body.appendChild(textArea);
                textArea.select();
                try {
                    var successful = document.execCommand('copy');
                    this.$Message.info('已复制到剪贴板')
                } catch (err) {
                }
                document.body.removeChild(textArea);
            },
            copyError(){
            },

        },
        mounted(){
            this.QrCodeUrl = 'http://www.jackhoo.cn/api/qr_code?url=' + this.livePage
            getOneLiveInfoById(this.$store.state.operatedLiveRoomId).then(response => {
                this.roomInfo = response.liveRoom
            })
            //获取主播信息
            getHostByLiveRoomId(this.$store.state.operatedLiveRoomId).then(res => {
                this.userInfo = res.cusHost

            })
            //获取直播间评论总数
            getCountOfComments(this.$store.state.operatedLiveRoomId).then(res =>{
                this.commentsCount = res.total +''
            })
            getGuideUrlByLiveRoomId(this.$store.state.operatedLiveRoomId).then(res => {
                if (res.code == 0 && res.page != null) {
                    this.guideUrl = res.page.pageUrl
                }
            })
        }
    }
</script>
<style scoped lang="less">
    .demo-Circle-custom {
        & h1 {
            color: #3f414d;
            font-size: 28px;
            font-weight: normal;
        }
        & p {
            color: #657180;
            font-size: 14px;
            margin: 10px 0 15px;
        }
        & span {
            display: block;
            padding-top: 15px;
            color: #657180;
            font-size: 14px;
            &:before {
                content: '';
                display: block;
                width: 50px;
                height: 1px;
                margin: 0 auto;
                background: #e0e3e6;
                position: relative;
                top: -15px;
            }
        ;
        }
        & span i {
            font-style: normal;
            color: #3f414d;
        }
    }

    .qr-code {
        //margin-top: 10px;
    }

    .copy {
        float: right;
        margin-top: 4px;
    }

    .view {
        float: right;
        margin-top: 8px;
        margin-right: 0px;
    }

    .info {
        //margin:6px 20px ;font-size: 14px;
        margin-left: 6px;
        margin-top: 10px;

    }

    .ivu-form-item {
        margin-bottom: 10px !important;
    }

</style>